
<template>
  
</template>

<script setup lang="ts">
import {ref, watch} from 'vue'
// watch侦听器
/*
watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用

watch第一个参数监听源

watch第二个参数回调函数cb（newVal,oldVal）

watch第三个参数一个options配置项是一个对象{

immediate:true //是否立即调用一次

deep:true //是否开启深度监听

*/
//1.监听Ref 案例
let message =ref({
  nav:{
   bar:{
     name:""
   }
  }
})
watch(message,(newVal,oldVal)=>{
  console.log("新的值",newVal)
  console.log("旧的值",oldVal)
},{
   immediate:true // 是否立即调用一次
    deep:true // 是否开启深度监听
  })

////1.监听reactive  案例
let message = reactive({
    name:"",
    name2:""
})
 
 
watch(()=>message.name, (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('旧的值----', oldVal);
})
//使用reactive监听深层对象开启和不开启deep 效果一样
let message = reactive({
    nav:{
        bar:{
            name:""
        }
    }
})
 
watch(message, (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('旧的值----', oldVal);
})




</script>


<style>

</style>
